看到一款树形结构，比较喜欢它的样式，就参照它的外观自己做了一个，练习一下CSS。

  做出来的效果如下：

• 拉莫小学
  • 一年级
    • 一班
    • 二班
  • 二年级
  • 三年级
    • 一班
    • 二班
    • 三班

树的dom结构：

     
    
      
        
       
            拉莫小学            
        
                
         
                    一年级                    
          
 
           
一班
           
二班
 
          
                
                
         
                    二年级                
                
         
                    三年级                    
          
 
           
一班
 
           
二班
 
           
三班
 
          
                
            
        
        
    
      
     

CSS代码：

/** tree.css zyj 2018.4.21 */ul,li{
   list-style-type:none;}.tree{
   display:block;position:relative;padding:5px 15px;}.tree span{
   display:inline-block;box-sizing:border-box;height:30px;line-height:28px;min-width:60px;text-align:center;color:#888;border:1px solid #ddd;border-radius:5px;padding:0 8px;}.tree ul{
   position:relative;padding-left:60px;margin:0;}.tree ul>li{
   position:relative;padding:5px 0;}.tree>ul{
   padding:0;margin:0;}/** 水平方向连线 */.tree>ul ul>li:after{
   content:' ';position:absolute;top:20px;left:-45px;width:45px;border:none;border-top:1px solid #ddd;}/** 垂直方向连线 */.tree ul>li:not(:last-child):before{
   content:' ';position:absolute;top:0;left:-45px;height:100%;border:none;border-left:1px solid #ddd;}.tree ul>li:last-child:before{
   content:' ';position:absolute;top:0;left:-45px;height:20px;border:none;border-left:1px solid #ddd;}/** 控制鼠标移上去的颜色 */.tree span:hover, .tree span:hover+ul span{
   color:#fff;background-color:orange;}.tree span:hover, .tree span:hover+ul span, .tree span:hover+ul li:before, .tree span:hover+ul li:after{
   border-color:orange;}/** 折叠图标 */.tree .fa:before{
   margin-right:5px;}.tree .fa-minus-circle, .tree .fa-plus-circle{
   cursor:pointer;}

里面引的fontawesome图标没法加载进来，导致折叠按钮显示不出，下面是原始树状图的截图：

数据是我用JS加载的，写了个加载数据的tree.js文件，源码如下：

/** tree.js zyj 2018.4.22 */(function(name){    var tree, outer, defaultDateFormat;        outer = {        setData : setData,    };        defaultDateFormat = {            unfold : true,            name : 'name',            childName : 'children'    };    function getDataFormat(dataFormat){        var index;        if(!dataFormat){            return defaultDateFormat;        }        for(index in defaultDateFormat){            dataFormat[index] = typeof dataFormat[index] == 'undefined'? defaultDateFormat[index] : dataFormat[index];        }        return dataFormat    }        function initTreeJs(name){        var tree;        if(checkTreeNameUsed(name)){
   return;}        window[name] = outer;        initFoldIcon($('.tree'));    }        function checkTreeNameUsed(name){        if(window[name]){            console.error("The window object name [" + name + "] has been used, tree.js can't be loaded! You can try another name." );            return true;        }        return false;    }        function initFoldIcon(target){        target.off('click', 'span>i.fa').on('click', 'span>i.fa', function(e){            var ele = $(e.target);            if(ele.hasClass('fa-minus-circle')){                ele.removeClass('fa-minus-circle').addClass('fa-plus-circle').parent().next('ul').hide(200);            }else if(ele.hasClass('fa-plus-circle')){                ele.removeClass('fa-plus-circle').addClass('fa-minus-circle').parent().next('ul').show(200);            }        })    }        function getJqueryObjectBySelector(selector){        var ele = $(selector);        if(typeof selector != 'string'){            console.error("The first parameter jquery selector [" + selector +  "] must be a string!" );            return;        }        if(!ele.hasClass('tree')){            ele = ele.find('.tree');        }        if(ele.length != 1){            console.error("The selector [" + selector +  "] expect only one element!" );            return;        }        return ele;    }        function setData(selector, data, dataFormat){        var ele = getJqueryObjectBySelector(selector);        if(!ele){
   return;}        if(!data){
   return;}        if(!data.length){            data = [data];        }        dataFormat = getDataFormat(dataFormat);        dataFormat.topElement = true;        ele.empty().append(getTreeList(data, dataFormat));        initFoldIcon(ele);    }        function getTreeList(data, dataFormat){        var i, single, name, children, childDataFormat,             array = [];        childDataFormat = dataFormat.child || dataFormat;        if(dataFormat.unfold){            array.push('
     
      ');        }else if(dataFormat.topElement){            dataFormat.topElement = false;            array.push('
      
       ');        }else{            array.push('
       
        ');        }        for(i=0; i
        
         ');            array.push('
         ');            if(children && children.length > 0){                if(dataFormat.unfold){                    array.push('');                }else{                    array.push('');                }                array.push(name);                array.push('');                array.push(getTreeList(children, childDataFormat));            }else{                array.push(name);                array.push('');            }            array.push('');        }        array.push('
        
       
');        return array.join('');    }        initTreeJs(name);}('tree'))
      
     

偷懒没写注释，tree.js中目前只写了一个对外的接口 tree.setData(selector, data, dataFormat) 。参数selector是jQuery选择器，data是数据，dataFormat是数据格式。

比如加载上图的数据：

var dataTest = {name:'拉莫小学', children:[   {       name:'一年级',       children:[           {name:'一班'},           {name:'二班'}       ]   },   {       name:'二年级'   },   {       name:'三年级',       children:[           {name:'一班'},           {name:'二班'},           {name:'三班'}       ]   }]};tree.setData('.tree', dataTest);

由于后台加载的数据不一定是按照{name:'*', children:[{name:'*'},...]}这种结构，所以留了dataFormat参数，自己去定义数据格式。

简单举个例子，假如后台数据格式是

var data = {    id : '1',    title : '百度',    url : 'http://www.baidu.com',    subWeb :     [         {             id : '2',             title : '百度新闻',             url : 'http://news.baidu.com'         },         {             id : '3',             title : '百度知道',             url : 'http://zhidao.baidu.com'         },         {             id : '4',             title : '百度图片',             url : 'http://image.baidu.com'         },     ]}

那么dataFormat可以定义为

var dataFormat = {    name : function(data){        return '' + data.title + '';    },    childName : 'subWeb'}

至于效果，读者自己去试咯。